import { Component, OnInit } from '@angular/core';
import { PickerController } from '@ionic/angular';
import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
import {HttpClient,HttpHeaders} from "@angular/common/http";
import { DatePipe } from '@angular/common';
import {TranslateService} from '@ngx-translate/core';
import { DefaultLanguageService } from '@services/default-language.service';
import { AuthTokenService } from '@services/auth-token.service';
import { CommonResponse,VerificationType,ToastColor,CommonService,AppParam } from '@services/common-service.service';
@Component({
  selector: 'app-duedate-reminder',
  templateUrl: './duedate-reminder.page.html',
  styleUrls: ['./duedate-reminder.page.scss'],
})
export class DuedateReminderPage implements OnInit {
  options=[];
  i18n:any;
  initPages(){
    this.options = [
      { 
        id:'1',
        title:this.i18n.remind_to_pay,
        icon:'',
        path:'',
        toggle:true,
        optionEnable:false, //ion-toggle开关的样式
        // changeEnable:(evt,option)=>{
        //   this.changeOptionToggle(evt,option);
        // },
        comment:false //
      },
      {
        id:'2',
        title:this.i18n.reminder_time,
        icon:'',
        path:'',
        toggle:false,  //是否展示ion-toggle
        optionEnable:false, //ion-toggle开关的样式
        comment:true//title底部小字体
      }
    ];
  }

  defaultColumnOptions = [
    [
      'Each Month 23',
      'Each Month 24',
      'Each Month 25',
      'Each Month 26',
      'Each Month 27'
    ]
  ];

  dateOptions = {
    columns: this.getColumns(1, 5, this.defaultColumnOptions),
    buttons: [{
      text: ' Cancel',
      role: 'cancel',
      handler: () => {}
    },
    {
      text: 'Reminder Time',
      cssClass:'customer_picker',
      handler: () => {
        return false;
      }
    },
    {
      text: 'Ok',
      handler: (value) => {
        console.info(value);
        let dateTime = value['col-0'].text;
        this.selectedDate = dateTime;
        this.dateChange(dateTime);
      }
    }]
  };

  getColumns(numColumns, numOptions, columnOptions) {
    let columns = [];
    for (let i = 0; i < numColumns; i++) {
      columns.push({
        name: `col-${i}`,
        options: this.getColumnOptions(i, numOptions, columnOptions)
      });
    }
    return columns;
  }

  getColumnOptions(columnIndex, numOptions, columnOptions) {
    let options = [];
    for (let i = 0; i < numOptions; i++) {
      options.push({
        text: columnOptions[columnIndex][i % numOptions],
        value: i
      })
    }

    return options;
  }

  async openPicker(){
    const picker = await this.pickerController.create({
      columns: this.getColumns(1, 5, this.defaultColumnOptions),
      buttons: [{
        text: ' Cancel',
        role: 'cancel',
        handler: () => {}
      },
      {
        text: 'Reminder Time',
        cssClass:'customer_picker',
        handler: () => {
          return false;
        }
      },
      {
        text: 'Ok',
        handler: (value) => {
          console.info(value);
          let dateTime = value['col-0'].text;
          this.selectedDate = dateTime;
          this.dateChange(dateTime);
        }
      }]
    });
    await picker.present();
  }
  appUserId = this.authTokenService.getAppUserId();
  constructor(
    private activatedRoute: ActivatedRoute,
    public pickerController:PickerController,
    private http:HttpClient,
    private authTokenService: AuthTokenService,
    private datePipe: DatePipe,
    private translate: TranslateService,
    private defaultLanguageService:DefaultLanguageService,
    private commonService:CommonService
  ) { 
    this.i18n = this.commonService.initTranslate(['myAccount.setting.message_notification_setting.duedate_reminder_setting']);
    this.customerMonthShortNames = this.i18n.customer_month;
    this.initPages();

    this.activatedRoute.data.subscribe((obj)=>{
        let body = obj.data.responseBody;
        this.options.forEach((data:any,index:number)=>{
          data.optionEnable=body.payReminder == 0 ? false : true;
          if(index==1){
            data.toggle = false;
            this.selectedDate = body.reminderDate;
          }
        });
    });
  }

  customerMonthShortNames=[];

  ngOnInit() {
  }

  changeDueDateToggle(evt,option){
    let find = this.options.find(value=>value.id==1);
    // find.optionEnable = !find.optionEnable;
    console.info('changeDueDateToggle');
    console.info(option);
    let api = '/scm/app/updateMessageNotification.do';
    let requestData:any = {
      appUserId:this.appUserId,
      payReminder:option.optionEnable ? 1 : 0
    };
    this.http.post(api,requestData).subscribe((response) => {});
  }

  showDetail(evt,id){
    let find = this.options.find(value=>value.id==1);

    if(!find.optionEnable){
      return false; 
    }
    if(id==2){
      this.openPicker();
    }
    return false;
  }
  selectedDate = '';
  dateChange(evt){
    console.info(evt);
    // this.selectedDate = evt.detail.value;
    this.selectedDate = evt;
    let api = '/scm/app/updateMessageNotification.do';
    let requestData:any = {
      appUserId:this.appUserId,
      reminderDate: evt//this.datePipe.transform(evt,'yyyy-MM-dd HH:mm:ss')
    };
    this.http.post(api,requestData).subscribe((response) => {});
  }

  // private getColumns() {
    
  //   return [
  //     {
  //       name: 'col-0',
  //       options: [
  //         {
  //           text: "选项1",
  //           value: 0
  //         },
  //         {
  //           text: "选项2",
  //           value: 1
  //         },
  //         {
  //           text: "选项3",
  //           value: 2
  //         }
  //       ]
  //     }
  //   ];
  // }

  // public async openPicker() {
  //   const picker = await this.pickerController.create({
  //     columns: this.getColumns(),
  //     buttons: [
  //       {
  //         text: '取消',
  //         role: 'cancel'
  //       },
  //       {
  //         text: '确定',
  //         handler: (value) => {
  //           console.log("${value['col-0'].text}");
  //         }
  //       }
  //     ]
  //   });

  //   await picker.present();
  // }

}
